<template>
  <view class="x-goods-thumbnail" v-if="detail">
    <view class="goods-detail">
      <view class="img">
        <x-image :src="detail.productImgUrl"/>
      </view>
      <view class="rt">
        <view class="name line-clamp-1">
          {{ detail.productTitle || '' }}
        </view>
        <view class="spec line-clamp-1" v-if="detail.productSku">
          <text v-if="detail.comboName">套餐:{{detail.comboName}}</text>{{ JSON.parse(detail.productSku).join(',') || '' }}
        </view>
        <view class="flex1"></view>
        <view class="bottom">
          <view class="flex1" v-if="showPrice">
            <text class="tips">¥</text><text class="price">{{ detail.productPrice || '' }}</text>
          </view>
          <view class="num" v-if="detail.productCount && showPrice">
            x{{ detail.productCount }}
          </view>
          <view class="num" v-else>
            数量:{{detail.productCount}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import XImage from '../x-image';
export default {
  name: 'XGoodsThumbnail',
  components: { XImage },
  props: {
    detail: {
      type: Object,
      default: () => {}
    },
    showPrice: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  },
  computed: {},
  created() {
  },
  mounted() {

  },
  onLoad(query) {
    this.query = query;
  },
  watch: {},
  // 滚动页面
  onPageScroll(e) {

  },
  /**
   * 下拉刷新
   * */
  onPullDownRefresh() {
  },
  // 页面触底加载数据
  onReachBottom() {
  },
  // 分享转发
  onShareAppMessage() {
    // return {
    //   path: '/pages/index/index'
    // };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.x-goods-thumbnail{
  .goods-detail{
    display: flex;
    padding: 16px 24px;
    background: #FFFFFF;
    .img{
      width: 180px;
      height: 180px;
      border-radius: 6px;
      background: #FFECEC;
    }
    .rt{
      display: flex;
      flex: 1;
      flex-direction: column;
      margin-left: 12px;
      .name{
        font-size: 28px;
        color: $uni-color-default;
      }
      .spec{
        font-size: 24px;
        color: $uni-color-info;
      }
      .bottom{
        display: flex;
        align-items: baseline;
        color: $uni-color-primary;
        font-size: 24px;
        .tips{
          font-size: 24px;
        }
        .price{
          font-weight: bold;
          font-size: 32px;
        }
        .num{
          font-size: 24px;
          color: #999999;
        }
      }
    }
  }
}
</style>
